<!-- 评论管理 -->
<template>
  <div>
    <div v-for="(item,index) in tabledata" :key="index">
      <div style="display: flex;">
        <div>
          <img :src="item.header" style="border-radius: 50%;width: 40px;height: 40px;" />
        </div>
        <div style="line-height: 40px;text-indent: 0.5em;">{{item.nickName}}</div>
      </div>
      <div style="text-indent: 3em;">
        {{item.comment}}
      </div>
      <div v-if="item?.children?.length">
        <div v-for="(items,indexs) in item.children" :key="item.id">
          <div style="display: flex;">
            <div style="text-indent: 3em;margin-top: 30px;">
              <img :src="items.header" style="border-radius: 50%;width: 40px;height: 40px;" />
            </div>
            <div style="line-height: 100px;text-indent: 0.5em;">{{items.nickName}}</div>
          </div>
          <div style="text-indent: 6em;margin-top: -20px;">
            {{items.comment}}
          </div>
          <div v-if="items?.children?.length">
            <div v-for="(pop,spg) in items.children" :key="pop.id">
              <div style="display: flex;">
                <div style="text-indent: 5em;margin-top: 30px;">
                  <img :src="pop.header" style="border-radius: 50%;width: 40px;height: 40px;" />
                </div>
                <div style="line-height: 100px;text-indent: 0.5em;">{{pop.nickName}}</div>
              </div>
              <div style="text-indent: 8em;margin-top: -20px;">
                {{pop.comment}}
              </div>
              <div v-if="pop?.children?.length">
                <div v-for="(spgs,ui) in pop.children" :key="spgs.id">
                  <div style="display: flex;">
                    <div style="text-indent: 7em;margin-top: 30px;">
                      <img :src="spgs.header" style="border-radius: 50%;width: 40px;height: 40px;" />
                    </div>
                    <div style="line-height: 100px;text-indent: 0.5em;">{{spgs.nickName}}</div>
                  </div>
                  <div style="text-indent: 10em;margin-top: -20px;">
                    {{spgs.comment}}
                  </div>
                  <div v-if="spgs?.children?.length">
                    <div v-for="(wdss,ites) in spgs.children" :key="wdss.id">
                      <div style="display: flex;">
                        <div style="text-indent: 10em;margin-top: 30px;">
                          <img :src="wdss.header" style="border-radius: 50%;width: 40px;height: 40px;" />
                        </div>
                        <div style="line-height: 100px;text-indent: 0.5em;">{{wdss.nickName}}</div>
                      </div>
                      <div style="text-indent: 13.2em;margin-top: -20px;">
                        {{wdss.comment}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
const tabledata = reactive(
  [
    {
      "id": 1, "nickName": "js大牛", "header": "https://img0.baidu.com/it/u=1348709467,3751255405&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200", "comment": "听说今天要使用递归实现评论列表",
      "children": [{
        "id": 2, "nickName": "在学算法的小胖", "header": "http://img.duoziwang.com/2017/07/26183817321274.jpg", "comment": "哇，太好了，可以很好的提升我的算法了，大家有什么好的方法去实现了？",
        "children": [{ "id": 3, "nickName": "面壁者-肖叮", "header": "http://img.duoziwang.com/2017/07/26183817321147.jpg", "comment": "我也想知道，感觉这个好难哦", "children": [] },
        { "id": 4, "nickName": "从0到1", "header": "http://img.duoziwang.com/2016/10/27/15110914705.jpg", "comment": "我现在也没用思路，只能边写边想了。" }]
      }]
    }, {
      "id": 5, "nickName": "js大牛", "header": "http://img.duoziwang.com/2016/10/27/15120614923.jpg", "comment": "这个功能需求是一个学长公司的，学长现在发展不错哦，月薪30K", "children": [{ "id": 6, "nickName": "在学算法的小胖", "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg", "comment": "膜拜大佬，向大佬学习", "children": [] },
      { "id": 7, "nickName": "面壁者-肖叮", "header": "http://img.duoziwang.com/2016/12/23/01594969440.jpg", "comment": "膜拜大佬，你是我的偶像，我也要努力拿高薪", "children": [] },
      {
        "id": 8, "nickName": "从0到1", "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg", "comment": "太棒了，努力，努力！", "children": [{ "id": 9, "nickName": "YuePeng+", "header": "http://img.duoziwang.com/2017/07/26183817321274.jpg", "comment": "我觉得我应该能够很快做出来，大家觉得我有这个实力么？", "children": [{ "id": 12, "nickName": "YuePeng+", "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg", "comment": "吹牛逼吧！", "children": [{ "id": 13, "nickName": "Evan-Nightly", "header": "http://img.duoziwang.com/2016/10/27/15110914705.jpg", "comment": "等着瞧！就做出来给你看", "children": [] }] }] },
        { "id": 8, "nickName": "从0到1", "header": "http://img.duoziwang.com/2017/09/1611314386085.jpg", "comment": "大家有什么好方法了，发出来参考一下", "children": [{ "id": 9, "nickName": "YuePeng+", "header": "http://img.duoziwang.com/2016/10/27/15120614923.jpg", "comment": "我只知道递归就是函数调用函数，但结构渲染是个难题", "children": [] }, { "id": 8, "nickName": "从0到1", "header": "http://img.duoziwang.com/2016/12/17/10384445124.jpg", "comment": "我现在一点思路都没有，救救我啊", "children": [{ "id": 10, "nickName": "YuePeng+", "header": "http://img.duoziwang.com/2017/07/26183817321147.jpg", "comment": "我也是，怎么办了？", "children": [] }, { "id": 11, "nickName": "hvang1988", "header": "http://img.duoziwang.com/2016/10/27/15120514921.jpg", "comment": "终于做出来了，好开心啊！其实也不难，就是思路的问题。", "children": [] }] }] }]
      }]
    }
  ]
)

function fn(tabledata: any[]) {
  let data = []
  tabledata.forEach((item) => {
    if (item.children && item.children.length) {
      data.push(item)
      const temp = fn(item.children)
      if (temp.length) {
        data.push(...temp)
      }
    }
  })
  return data
}

let datas = fn(tabledata)
console.log(datas);
</script>

<style lang="less" scoped>
.dataitem {}
</style>